<template>
    <el-row class="application-mine-create">
        <el-col>
            <!-- <div class="tree-title">我的发布</div> -->
            <el-table
                v-loading="loading"
                :data="tableList"
                :max-height="mapHeight"
                border
            >
                <el-table-column label="序号" type="index"></el-table-column>
                <el-table-column
                    label="服务中文名称"
                    prop="apiName"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    label="服务英文名称"
                    prop="apiNameEn"
                    show-overflow-tooltip
                >
                    <template slot-scope="scope">
                        {{ scope.row.apiNameEn || "-" }}
                    </template>
                </el-table-column>
                <el-table-column
                    label="接口所属组"
                    prop="groupName"
                    show-overflow-tooltip
                    align="center"
                >
                    <template slot-scope="scope">
                        {{ scope.row.groupName || "-" }}
                    </template>
                </el-table-column>
                <el-table-column
                    label="接口URL路径"
                    prop="requestPath"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    label="创建人"
                    prop="createBy"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    label="创建时间"
                    prop="createTime"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    label="接口状态"
                    prop="apiStatus"
                    show-overflow-tooltip
                >
                    <template slot-scope="scope">
                        {{
                            scope.row.apiStatus === 0
                                ? "暂停"
                                : scope.row.apiStatus === undefined
                                ? "-"
                                : "运行中"
                        }}
                    </template>
                </el-table-column>
                <el-table-column
                    label="累计被调用次数"
                    prop="invokeNum"
                    show-overflow-tooltip
                    sortable
                ></el-table-column>
                <el-table-column
                    label="累计被调用成功率"
                    prop="invokeSuccessNum"
                    show-overflow-tooltip
                    sortable
                ></el-table-column>

                <el-table-column
                    label="累计订阅人数"
                    prop="subscribeNum"
                    show-overflow-tooltip
                    sortable
                >
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button  @click="viewDetail(scope.row)" size="mini" type="text"
                            >查看API详情</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <pagination
                v-show="totalNum > 0"
                :total="totalNum"
                :page.sync="ruleForm.pageNum"
                :limit.sync="ruleForm.pageSize"
                @pagination="fetchData"
            ></pagination>
        </el-col>
    </el-row>
</template>

<script>
import { getHeight } from "@/utils/zkComm";
import { getInterfaceStatistics } from "@/api/dataService/serviceMonitor/monitorList";

export default {
    name: "applicationMinePublished",
    props: {
        form: {
            type: Object,
            default: () => {
                return {};
            }
        }
    },
    data() {
        return {
            loading: false,
            ruleForm: {
                pageNum: 1,
                pageSize: 30,
                viewType: 2
            },
            tableList: [],
            totalNum: 0,
            mapHeight: undefined
        };
    },
    computed: {
        mergerRuleForm() {
            // 不做过滤不需要的字段，由后端负责过滤
            return Object.assign({}, this.ruleForm, this.form);
        }
    },
    created() {
        this.fetchData();
    },
    mounted() {
        this.mapHeight = getHeight(true) - 240;
    },
    methods: {
        fetchData() {
            let parmas = {
                pageNum: this.mergerRuleForm.pageNum,
                pageSize: this.mergerRuleForm.pageSize
            };
            getInterfaceStatistics(this.mergerRuleForm)
                .then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        this.tableList = res.data.records;
                        this.totalNum = res.data.total;
                    }
                    this.loading = false;
                })
                .catch(() => {
                    this.loading = false;
                });
        },
        viewDetail(row) {
            if (row && row.apiId) {
                this.$router.push(
                    `/service/application/doc/detail?docId=${row.apiId}`
                );
            }
        }
    }
};
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/system/tree.scss";

.tree-title {
    height: 30px;
    line-height: 30px;
}
</style>
